<template>
  <div class="imgMaterial-page">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <crumbs>素材管理</crumbs>
        <!-- <crumbs><span slot="content">内容管理</span></crumbs> -->
      </div>
      <el-radio-group v-model="reqParams.collect" @change="changeRadio" size="small">
        <el-radio-button :label="false">全部</el-radio-button>
        <el-radio-button :label="true">收藏</el-radio-button>
      </el-radio-group>
      <el-button @click="addImg" style="float: right" type="success" size="small">添加素材</el-button>
      <ul class="item-list">
        <li class="item-img" v-for="(item) in imgList" :key="item.id">
          <img :src="item.url" alt="">
          <p v-if="!reqParams.collect">
            <i @click="isCollect(item)" :class="[{ 'el-icon-star-off': true }, item.is_collected ? 'pitchOn' : '' ]"></i>
            <i @click="removeMaterial(item.id)" class="el-icon-delete"></i>
          </p>
        </li>
      </ul>
      <!-- 分页 -->
      <el-pagination
        style="margin-top: 20px"
        background
        @size-change="changeSize"
        @current-change="changePage"
        :current-page="reqParams.page"
        :page-sizes="[10, 15, 20, 25, 30]"
        layout="total, prev, pager, next, sizes, jumper"
        :total="total">
      </el-pagination>
    </el-card>
    <el-dialog
      title="添加素材"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      width="30%">
      <!-- <el-upload
        class="avatar-uploader"
        name="image"
        :headers="imgHearders"
        action="http://api-toutiao-web.itheima.net/mp/v1_0/user/images"
        :on-success="imgSuccess"
        :show-file-list="false">
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload> -->
      <uploading :imageUrls="imageUrl" @on-imgSuccess="onImgSuccess"></uploading>
    </el-dialog>
  </div>
</template>

<script>
// import axios from 'axios'
import { userImg, collectImg, removeImg } from '@/api/material'
export default {
  name: 'ImgMaterial',
  data () {
    return {
      reqParams: {
        collect: false,
        page: 1,
        per_page: 10
      },
      total: 0,
      // 素材列表
      imgList: [],
      dialogVisible: false,
      // // 预览图片地址
      imageUrl: ''
      // // 请求路径
      // // imgActionUrl: ,
      // // 请求头
      // imgHearders: {
      //   Authorization: 'Bearer ' + JSON.parse(window.localStorage.getItem('myToken')).token
      // }
    }
  },
  mounted () {
    this.getUserImg()
  },
  methods: {
    // 获取用户图片
    async getUserImg () {
      const { data: { data } } = await userImg(this.reqParams)
      // console.log(data)
      this.total = data.total_count
      this.imgList = data.results
    },
    // 全选和收藏的切换
    changeRadio (curent) {
      // console.log(curent)
      this.reqParams.collect = curent
      this.getUserImg()
    },
    // 添加素材
    addImg () {
      this.dialogVisible = true
      this.imageUrl = ''
    },
    // 父组件接收子组件的数据 图片的url
    onImgSuccess (url) {
      this.imageUrl = url
      this.$message.success('添加素材成功！')
      setTimeout(() => {
        this.dialogVisible = false
      }, 1000)
      // 获取用户图片
      this.getUserImg()
    },
    // // 文件上传成功之后的函数
    // imgSuccess (response) {
    //   this.imageUrl = response.data.url
    //   this.$message.success('添加素材成功！')
    //   setTimeout(() => {
    //     this.dialogVisible = false
    //   }, 1000)
    //   // 获取用户图片
    //   this.getUserImg()
    // },
    // 是否收藏
    async isCollect (item) {
      console.log(item)
      // const txt = item.is_collected ? '取消收藏成功！' : '添加收藏成功!'
      const { data: { data } } = await collectImg({ id: item.id, collect: !item.is_collected })
      // 利用请求后返回的数据，来给参数里的数据赋值
      item.is_collected = data.collect
      // item.is_collected = !item.is_collected
      // this.$message.success(txt)
      this.$message.success(data.collect ? '添加收藏成功!' : '取消收藏成功！')
    },
    // 删除图片素材
    removeMaterial (id) {
      this.$confirm('此操作将永久删除该图片素材, 是否继续?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await removeImg({ id })
          this.$message.success('删除图片成功！')
          this.getUserImg()
        } catch (e) {
          this.$message.error('删除图片失败！')
        }
      }).catch(() => {

      })
    },
    // 分页跳转
    changePage (curPage) {
      this.reqParams.page = curPage
      this.getUserImg()
    },
    // 每页显示多少条数
    changeSize (curSize) {
      this.reqParams.page = 1
      this.reqParams.per_page = curSize
      this.getUserImg()
    }
  }
}
</script>

<style lang="less" scoped>
.item-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  .item-img {
    position: relative;
    width: 200px;
    height: 170px;
    margin: 0 20px 20px 0;
    border: 1px solid #ddd;
    img {
      width: 100%;
      height: 100%;
    }
    p {
      position: absolute;
      left: 0;
      bottom: 0;
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 100%;
      height: 30px;
      background: rgba(0, 0, 0, .3);
      margin: 0;
      i {
        color: #fff;
      }
      .pitchOn {
        color: red;
      }
    }
  }
}
</style>
